<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    可以在事件对应的属性中设置一些js代码，
     当事件被触发时，这些代码会执行

     这种写法称为结构和行为耦合，不方便维护，不推荐使用
     -->
    <button id="btn" onclick="alert('点击后');">按钮</button>
    <script>
      /**
       * 事件，就是用户和浏览器之间的交互行为
       *  比如点击按钮，鼠标移动
       */

      //  获取按钮对象
      var btn = document.getElementById("btn");

      /**
       * 可以为按钮的对应事件绑定处理函数的形式来响应事件
       */

      //    绑定单击事件/单机响应函数
      btn.onclick = function () {
        alert("点击");
      };
    </script>
  </body>
</html>
